<template>
  <!-- 荣耀榜单 -->
  <div>
    <!-- 搜索框 -->
    <el-form ref="table_form" :model="table_form" class="table-search" :inline="true" label-width="100px">
      <el-form-item label="统计日期：" prop="endTime">
        <el-date-picker 
          value-format="yyyy-MM-dd HH:mm:ss" 
          v-model="table_form.endTime" 
          type="daterange" 
          :unlink-panels="true"
          :default-time="['00:00:00', '23:59:59']"
          > </el-date-picker>
      </el-form-item>
      <el-form-item label="选择区域：" prop="area">
        <el-cascader v-model="table_form.area" :options="area" :props="{ checkStrictly: true, value: 'label' }" clearable></el-cascader>
      </el-form-item>
      <el-form-item label="选择门店：" prop="enterpriseStoreId">
        <el-select clearable v-model="table_form.enterpriseStoreId" placeholder="请选择门店！">
          <el-option
            v-for="item in storeData"
            :key="item.id"
            :label="item.storeName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="门店类型：" prop="storeTypeId">
        <el-select clearable v-model="table_form.storeTypeId" placeholder="请选择门店类型！">
          <el-option label="直营" :value="0"></el-option>
          <el-option label="合营" :value="1"></el-option>
          <el-option label="支撑" :value="2"></el-option>
          <el-option label="系统使用" :value="3"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="handle_search">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="handle_reset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格顶部的操作按钮 -->
    <div class="btn-box">
      <!-- 接口返回按钮 -->
      <div class="left"></div>
      <!-- 表格列显示、隐藏 -->
      <div class="right">
        <el-popover
          placement="bottom-end"
          width="120"
          trigger="click">
          <el-checkbox v-model="checked_obj[1]">门店名称</el-checkbox>
          <el-checkbox v-model="checked_obj[2]">教练名称</el-checkbox>
          <el-checkbox v-model="checked_obj[3]">新单转化分</el-checkbox>
          <el-checkbox v-model="checked_obj[4]">续课分</el-checkbox>
          <el-checkbox v-model="checked_obj[5]">转介绍分</el-checkbox>
          <el-checkbox v-model="checked_obj[6]">耗课分</el-checkbox>
          <el-checkbox v-model="checked_obj[7]">留存分</el-checkbox>
          <el-checkbox v-model="checked_obj[8]">心率带分</el-checkbox>
          <el-checkbox v-model="checked_obj[9]">客户满意度分</el-checkbox>
          <el-checkbox v-model="checked_obj[10]">手动加分</el-checkbox>
          <el-checkbox v-model="checked_obj[11]">合计分</el-checkbox>
          <el-button slot="reference" type="primary" icon="iconfont icon-faxianxuanze"></el-button>
        </el-popover>
        <!-- 导出excell -->
        <el-button type="primary" icon="iconfont icon-export" @click="handle_excell"></el-button>
      </div>
    </div>

     <!-- 表格 -->
    <el-table id="excell-table" :data="tableData" border header-cell-class-name="table-style">
      <el-table-column label="门店名称" show-overflow-tooltip min-width="180" align="center"  v-if="checked_obj[1]">
        <template slot-scope="scope"> {{ scope.row.enterpriseStore.storeName}} </template>
      </el-table-column>
      <el-table-column label="教练名称" align="center"  v-if="checked_obj[2]">
        <template slot-scope="scope"> {{ scope.row.coachUser.realName}} </template>
      </el-table-column>
      <el-table-column label="新单转化分" align="center"  v-if="checked_obj[3]">
        <template slot-scope="scope"> {{ scope.row.newOrderScore}} </template>
      </el-table-column>
      <el-table-column label="续课分" align="center"  v-if="checked_obj[4]">
        <template slot-scope="scope"> {{ scope.row.renewOrderScore}} </template>
      </el-table-column>
      <el-table-column label="转介绍分" align="center"  v-if="checked_obj[5]">
        <template slot-scope="scope"> {{ scope.row.referralOrderScore}} </template>
      </el-table-column>
      <el-table-column label="耗课分" align="center"  v-if="checked_obj[6]">
        <template slot-scope="scope"> {{ scope.row.courseScore}} </template>
      </el-table-column>
      <el-table-column label="留存分" align="center"  v-if="checked_obj[7]">
        <template slot-scope="scope"> {{ scope.row.retainedScore}} </template>
      </el-table-column>
      <el-table-column label="心率带分" align="center"  v-if="checked_obj[8]">
        <template slot-scope="scope"> {{ scope.row.heartRateBandScore}} </template>
      </el-table-column>
      <el-table-column label="客户满意度分" align="center"  v-if="checked_obj[9]">
        <template slot-scope="scope"> {{ scope.row.startScore}} </template>
      </el-table-column>
      <el-table-column label="手动加分" align="center"  v-if="checked_obj[10]">
        <template slot-scope="scope"> {{ scope.row.manualScore}} </template>
      </el-table-column>
      <el-table-column label="合计分" align="center"  v-if="checked_obj[11]">
        <template slot-scope="scope"> {{ scope.row.totalScore}} </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import area from '@/utils/area.json'
import { selectByRule } from '@/utils/apiStore.js'
import { gloryListApi } from '@/utils/apiAnalysis.js'
export default {
  data() {
    return {
      table_form: {
        endTime: this.G_time('', 1),
        createTimeBigin: '',
        createTimeEnd: '',
        area: '',
        province: '', // 第一层
        city: '', // 第二层
        district: '', // 第三层,
        enterpriseStoreId: '',
        storeTypeId: ''
      },
      area,
      storeData: [],
      tableData: [],
      checked_obj: {
        1: true,
        2: true,
        3: true,
        4: true,
        5: true,
        6: true,
        7: true,
        8: true,
        9: true,
        10: true,
        11: true
      }
    }
  },
  mounted () {
    this.get_store()
  },
  methods: {
    // 搜索
    handle_search() {
      // 处理时间
      if (this.table_form.endTime?.length == 2) {
        this.table_form.createTimeBigin  = this.table_form.endTime[0]
        this.table_form.createTimeEnd    = this.table_form.endTime[1]
      } else {
        this.table_form.endTime           = ''
        this.table_form.createTimeBigin   = ''
        this.table_form.createTimeEnd     = ''
      }

      // 区域选择
      if (this.table_form.area.length) {
        this.table_form.province  = this.table_form.area[0]
        this.table_form.city      = this.table_form.area[1] || ''
        this.table_form.district  = this.table_form.area[2] || ''
      }
      this.set_table(this.table_form)
    },

    // 重置resetFields
    handle_reset() {
      this.$refs['table_form'].resetFields()
       if (this.table_form.endTime?.length == 2) {
        this.table_form.createTimeBigin  = this.table_form.endTime[0]
        this.table_form.createTimeEnd    = this.table_form.endTime[1]
      } else {
        this.table_form.endTime           = ''
        this.table_form.createTimeBigin   = ''
        this.table_form.createTimeEnd     = ''
      }
      this.table_form.province            = ''
      this.table_form.city                = ''
      this.table_form.district            = ''

      this.set_table(this.table_form)
    },

    // 获取门店下拉框数据
    get_store() {
      selectByRule({ page: 1, rows: 999999 }).then(res => {
        if (res.errCode == 200) {
          let { elements } = res.data
          this.storeData = elements
        }
      })
    },

    // 表格数据
    set_table(params) {
      this.tableData = []
      gloryListApi(params).then(res => {
        if (res.errCode == 200) {
          this.tableData = res.data
        }
      })
    },

    // 导出excell
    handle_excell() {
      this.$confirm('是否导出excell表格?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          this.G_excell2()
      }).catch(action => {});
    },
  }
};
</script>

<style lang="scss" scoped>
</style>